<template>
	<view class="warp">
		<view class="header">
			<view class="top_wrap" @click="getCommemorationTime">
				<view class="content_time">
					<view class="timer_left">
						<view class="timer_tip">
							与Tina想遇
						</view>
						<view class="timer_distance">
							{{userTime.timeT}}天
						</view>
						<view class="timer_time">
							{{userTime.userT}}
						</view>
					</view>
					<view class="timer_right">
						<image src="../../static/img/index/timepiece.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<!-- 宫格 -->
			<view class="fun">
				<uni-section title="小功能" type="line" padding>
					<uni-grid :column="4" :highlight="true" @change="change">
						<uni-grid-item v-for="(fun, index) in functionList" :index="index" :key="index">
							<view class="grid-item-box" style="background-color: #fff;">
								<img class="fun_img" :src="fun.url" alt="">
								<text class="text">{{fun.text}}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</uni-section>
			</view>
			<!-- 电影 -->
			<view class="movie">
				<uni-title type="h2" title="热映电影" align="center"></uni-title>
				<view class="movie_wrap" v-for="(movie,index) in movieList" :key="movie.id"
					@click="getParticulars(movie.id)">
					<image class="movie_pic" :src="movie.img"></image>
					<view class="movie_content">
						<text>{{movie.nm}}</text>
						<text>主演：{{movie.star}}</text>
						<text>上映时间：{{movie.rt}}</text>
						<text>{{movie.showInfo}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 音乐logo -->
		<view class="bo_music">
			<view class="movableArea">
				<view class="movableView">
					<image :class="{cartoon:musicStatic == 0}" src="../../static/img/index/bomusic.png"
						@click="playOrPause"></image>
				</view>
			</view>
		</view>
		<view>
			<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date"
				:insert="info.insert" :lunar="info.lunar" :startDate="info.startDate" :endDate="info.endDate"
				:range="info.range" @confirm="confirm" />
		</view>
	</view>
</template>
<script>
	export default {
		onLoad() {
			let res = uni.getStorageSync('userTimestamp');
			if (res) {
				this.handlerTime(res)
			}
		},
		async mounted() {
			await uni.request({
				url: 'https://m.maoyan.com/ajax/movieOnInfoList',
				method: 'GET',
				success: (res) => {
					this.movieList = res.data.movieList;
				}
			});
			this.getMusic();
		},
		data() {
			return {
				userTime: {
					timeT: 0,
					userT: '',
				},
				showCalendar: false,
				info: {
					lunar: true,
					range: false,
					insert: false,
					selected: []
				},
				movieList: [],
				musicStatic: 1,
				functionList: [{
						url: '../../static/img/index/passion.png',
						text: '土味情话',
					},
					{
						url: '../../static/img/index/calculator.png',
						text: '计算器',
					},
					{
						url: '../../static/img/index/speech.png',
						text: '随机一言',
					},
					{
						url: '../../static/img/index/head_portrait.png',
						text: '头像',
					}
				]
			}
		},
		methods: {
			// 确认日期的回调
			confirm(e) {
				const {
					fulldate
				} = e;
				this.handlerTime(fulldate)
			},
			// 计算时间的回调
			handlerTime(userTime) {
				uni.setStorageSync('userTimestamp', userTime);
				// 获取当前的时间戳
				let nowtimeStamp = new Date().getTime();
				// 对内容进行处理
				let inpTimeStamp = Date.parse(userTime.replace(/-/g, "/"));
				//  这里进行判断，不能选择今天以后的日子，提示
				if (inpTimeStamp > nowtimeStamp) {
					uni.showToast({
						title: '不能选择今天以后的日子',
						duration: 2000,
						icon: 'none'
					})
					return
				};
				// 计算
				this.userTime.userT = userTime;
				this.userTime.timeT = parseInt(Math.abs(nowtimeStamp - inpTimeStamp) / 1000 / 60 / 60 / 24);
			},
			// 日历的回调
			getCommemorationTime() {
				this.$refs.calendar.open()
			},
			// 音乐的回调
			async getMusic() {
				let musicClassify = ["热歌榜", "新歌榜", "飙升榜", "抖音榜", "电音榜"];
				let index = Math.floor((Math.random() * musicClassify.length));
				const keyword = musicClassify[index];
				let res = await uni.request({
					url: `https://api.uomg.com/api/rand.music?sort=${keyword}&format=json`,
					method: 'GET'
				})
				const {
					url
				} = res.data.data;
				this.initMusic(url)
			},
			playOrPause() {
				// 判断状态，播放、暂停
				if (this.musicStatic == 1) {
					this.playMusic()
				} else {
					this.pauseMusic()
				}
			},
			// 初始化音乐
			initMusic(url) {
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = false;
				this.innerAudioContext.loop = true;
				this.innerAudioContext.src = url;
			},
			// 开启音乐
			playMusic() {
				this.innerAudioContext.play();
				this.musicStatic = 0;
			},
			// 暂停音乐
			pauseMusic() {
				this.innerAudioContext.pause();
				this.musicStatic = 1;
			},
			// 点击宫格的回调
			change(e) {
				const {
					index
				} = e.detail;
				if (index == 0) {
					this.getLoverPrattle()
					return;
				}
				// 判断点击了哪个小功能
				switch (index) {
					case 1:
						uni.navigateTo({
							url: '/pages/calculator/calculator'
						});
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/wordDay/wordDay'
						});
						break;
					case 3:
						uni.navigateTo({
							url: '/pages/headPortrait/headPortrait'
						});
						break;
				}
			},
			// 随机土味情话
			async getLoverPrattle() {
				let res = await uni.request({
					url: 'https://api.uomg.com/api/rand.qinghua?format=json',
					method: 'GET',
				});
				const titleContent = res.data.content
				uni.showModal({
					title: '土味情话',
					content: '❤' + titleContent + '❤',
					success: function(res) {
						if (res.confirm) {
							uni.setClipboardData({
								data: titleContent,
								success: function() {
									uni.showToast({
										title: '复制到剪切板',
										duration: 2000,
										icon: 'none'
									})
								},
								fail: function() {
									uni.showToast({
										title: '复制失败',
										duration: 2000,
										icon: 'none'
									})
								},
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '遇到喜欢的可以点确定直接复制的ヾ(≧▽≦*)o 嗷~~~',
								duration: 2000,
								icon: 'none'
							})
						}
					}
				});
			},
			// 点击电影查看电影详情
			getParticulars(id) {
				uni.navigateTo({
					url: '/pages/movieParticulars/movieParticulars' + `?id=${id}`
				})
			}
		}
	}
</script>



<style lang="scss">
	@keyframes rotate {
		0% {
			transform: rotate(0);
		}

		25% {
			transform: rotate(90deg);
		}

		50% {
			transform: rotate(180deg);
		}

		75% {
			transform: rotate(270deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}


	.header {
		box-sizing: border-box;
		padding: 20rpx;

		.top_wrap {
			width: 100%;
			height: 400rpx;
			border-radius: 40rpx;
			margin-top: 10rpx;
			background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);


			.content_time {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin: 0;
				padding: 0;
				list-style: none;
				font-size: 36rpx;

				.timer_left {
					view {
						margin-top: 40rpx;
						margin-left: 20rpx;
					}

					.timer_tip {}

					.timer_distance {
						font-weight: 900;
						font-size: 48rpx;
					}

					.timer_time {}

				}

				.timer_right {
					image {
						width: 450rpx;
					}
				}

			}
		}
	}

	.content {
		.fun {
			.grid-item-box {
				flex: 1;
				// position: relative;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 15px 0;

				.fun_img {
					width: 65rpx;
					height: 65rpx;
				}

				.text {
					font-size: 28rpx;
					margin-top: 10rpx;
				}
			}
		}

		.movie {
			.movie_wrap {
				display: flex;
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				border: 4rpx solid #FFFAFA;

				.movie_pic {
					width: 25%;
					height: 240rpx;
				}

				.movie_content {
					margin-left: 20rpx;
					width: 70%;

					text:first-child {
						margin-top: 0rpx;
						font-weight: 900;
					}

					text {
						width: 90%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 36rpx;
						margin-top: 20rpx;
						display: block;
					}
				}
			}
		}
	}

	.bo_music {
		.movableArea {
			position: fixed;
			top: 70%;
			left: 80%;
			width: 100%;
			height: 100%;

			.movableView {
				image {
					width: 150rpx;
					height: 150rpx;
				}

				.cartoon {
					animation: rotate 10s linear infinite;
				}
			}
		}


	}
</style>